<template>
  <a-spin tip="Loading..." :spinning="spinning">
  <div>
    <a-row>
      <a-col span="11" align="center" justify="space-around">
        <a-row type="flex">
          <a-button type="primary" @click="export_se">导出缴费明细</a-button>
          <!--<a-button type="primary" @click="exportModal2">导出缴费明细</a-button>-->
          <!--<a-button type="primary" @click="exportOk">导出缴费明细</a-button>-->
        </a-row>
      </a-col>
        <a-modal
                title="导出已缴列表"
                :visible="exportVisible2"
                @ok="exportOk"
                @cancel="exportCancel2"
        >
            <a-row>
                <a-form>
                    <a-col span="24">
                        <a-form-item label="小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-select placeholder="请选择所属小区" v-decorator="['bd_info_id',{rules:[{required:true,message:'请选择小区'}]}]">
                                <a-select-option v-for="(item,index) in bd_info" @click="bdPro2(index)" :key="index" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col span="24">
                        <a-form-item label="类型" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-select placeholder="请选择类型">
                                <a-select-option v-for="(item,index) in type_list" @click="bd_see(index)" :key="index" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col span="24">
                        <a-form-item label="费用名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-input v-model="messages"></a-input>
                        </a-form-item>
                    </a-col>
                </a-form>
            </a-row>
        </a-modal>
        <a-modal
                title="确认窗口"
                :visible="show_se"
                @ok="exportOk1"
                @cancel="export_se_cel"
        >
            <span v-for="(item,index) in qu_s" :key="index" style="padding: 3px;font-size: 16px">{{item}}<br /></span>
        </a-modal>
      <a-col span="7" offset="6">
        <a-row type="flex" justify="space-around">
          <a-col span="18">
            <a-input-search placeholder="房号/车位号/车牌号/缴费人/手机号" v-model="gj_name_value" @search="onSearch"></a-input-search>
          </a-col>
          <a-col span="2">
            <a-button @click="searchModal">
              <a-icon type="filter" />
            </a-button>
          </a-col>
            <a-modal
                    title="高级搜索"
                    :visible="searchVisible"
                    @ok="searchOk"
                    :confirmLoading="confirmLoading"
                    @cancel="searchCancel"
            >
                <a-row>
                    <a-form>
                        <a-col span="24">
                            <a-form-item label="类型" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-select placeholder="请选择类型" @change="type_click">
                                    <a-select-option :key="0" :vaule="0">全部</a-select-option>
                                    <a-select-option :key="1" :vaule="1">房屋</a-select-option>
                                    <a-select-option :key="2" :vaule="2">车位</a-select-option>
                                    <a-select-option :key="3" :vaule="3">车辆</a-select-option>
                                    <a-select-option :key="4" :vaule="4">住户</a-select-option>
                                    <a-select-option :key="5" :vaule="5">其它收费</a-select-option>
                                    <a-select-option :key="6" :vaule="6">临时停车费</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-select placeholder="请选择小区">
                                    <a-select-option v-for="(item,index) in bd_info" :key="index" :value="item.id" @click="bd_click(item.id)">{{item.name}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="支付时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                                    <a-date-picker @change="start_time" style="width: 100%" />
                                </a-form-item>
                                <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">-</span>
                                <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                                    <a-date-picker @change="end_time" style="width: 100%" />
                                </a-form-item>
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="数据标签" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-select placeholder="请选择标签">
                                    <a-select-option v-for="(item,index) in labels" :key="index" :value="item.id" @click="lab_click(item.id)">{{item.name}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="操作员" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-select placeholder="请选择操作员">
                                    <a-select-option v-for="(item,index) in userAdmin" :key="index" :value="item.id" @click="admin_click(item.name)">{{item.name}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="状态" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-select placeholder="请选择状态" @change="status_click">
                                    <a-select-option :key="0" :vaule="0">全部</a-select-option>
                                    <a-select-option :key="1" :vaule="1">已缴</a-select-option>
                                    <a-select-option :key="2" :vaule="2">已退</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="收款方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-select placeholder="请选择收款方式" @change="sou_click">
                                    <a-select-option value="0">
                                        全部
                                    </a-select-option>
                                    <a-select-option value="1">
                                        线下支付-现金
                                    </a-select-option>
                                    <a-select-option value="2">
                                        线下支付-支票
                                    </a-select-option>
                                    <a-select-option value="3">
                                        线下支付-银行转账
                                    </a-select-option>
                                    <a-select-option value="4">
                                        线下支付-pos机刷卡
                                    </a-select-option>
                                    <a-select-option value="5">
                                        线下支付-支付宝直接转账
                                    </a-select-option>
                                    <a-select-option value="6">
                                        线下支付-微信直接转账
                                    </a-select-option>
                                    <a-select-option value="7">
                                        小区收款码-支付宝
                                    </a-select-option>
                                    <a-select-option value="8">
                                        小区收款码-微信
                                    </a-select-option>
                                    <a-select-option value="9">
                                        网上缴费1
                                    </a-select-option>
                                    <a-select-option value="10">
                                        网上缴费2
                                    </a-select-option>
                                    <a-select-option value="11">
                                        网上缴费3
                                    </a-select-option>
                                    <a-select-option value="12">
                                        账户余额
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="应收金额区间" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-input v-on:keyup="jine_min" style="width: 45%;" placeholder="最小"></a-input>
                                <a-input v-on:keyup="jine_max" style="margin-left:5%;width: 45%;" placeholder="最大"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="实收金额区间" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-input v-on:keyup="jine_min_s" style="width: 45%;" placeholder="最小"></a-input>
                                <a-input v-on:keyup="jine_max_s" style="margin-left:5%;width: 45%;" placeholder="最大"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="关键词" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-input v-on:keyup="gj_name" v-model="gj_name_value" placeholder="房号/车位号/车牌号/住户/手机"></a-input>
                            </a-form-item>
                        </a-col>
                    </a-form>
                </a-row>
            </a-modal>
        </a-row>
      </a-col>
    </a-row>
    <p style="margin-top:1em;margin-bottom:0;">导出说明：请先通过筛选搜索账单后导出，未搜索直接导出将导出全部账单，单次导出账单上线为5000条</p>
    <br />
    <a-row>
      <s-table
        :columns="columns"
        :rowSelection="rowSelection"
        :data="dataSource"
        ref="table"
        :scroll="{ x: 1800}"
        >
          <template slot="info" slot-scope="text, record">
              {{text}}
              <a-tooltip placement="left">
                  <template slot="title">
                      <p>{{record.label}}</p>
                  </template>
                  <a-icon type="bars" style="cursor: pointer;"></a-icon>
              </a-tooltip>
          </template>
          <template slot="remark_list" slot-scope="text, record">
              <a-tooltip placement="left">
                  <template slot="title">
                      <p v-for="(item,index) in record.remark_list">{{item}}</p>
                  </template>
                  <a-icon type="bars" style="cursor: pointer;">{{text}}</a-icon>
              </a-tooltip>
          </template>
        <template slot="bd_info_id_text" slot-scope="text, record">
          <span>{{text}}</span><br/>
          <span v-if="record.bd_info_id_text_t">({{record.bd_info_id_text_t}})</span>
        </template>
        <template slot="name" slot-scope="text, record">
          <span>{{text}}</span><br/>
          <span>{{record.start_time}}</span><br/>
          <span>{{record.end_time}}</span>
        </template>
          <template slot="user_id_name" slot-scope="text, record">
              <span>{{record.u_name}}</span><br/>
              <span>{{record.u_phone}}</span>
          </template>
        <template slot="pay_style_text" slot-scope="text, record">
          <span>{{text}}</span><br/>
          <span>({{record.pay_time}})</span>
        </template>
        <template slot="price" slot-scope="text, record">
          <a-tooltip placement="right">
            <template slot="title">
              <p>单价：¥{{record.one_money}}</p>
              <p>数量：{{record.num}}</p>
            </template>
            <span>{{text}}</span>
          </a-tooltip>
        </template>
          <template slot="money" slot-scope="text, record">
              ¥{{text}}
          </template>
          <template slot="overdue" slot-scope="text, record">
              ¥{{text}}
          </template>
          <template slot="offer" slot-scope="text, record">
              ¥{{text}}
          </template>
      </s-table>
      <a-row style="height:45px;background-color: #fafafa;border-bottom: 1px solid #e8e8e8" type="flex" justify="center">
            <a-col span="12"></a-col>
            <a-col span="4" align="center" style="line-height:45px">
              统计：
            </a-col>
            <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
              应收金额
            </a-col>
            <a-col class="tdx_w" span="4" align="center"  style="line-height:45px">
              实收金额
            </a-col>
          
        </a-row>
        <a-row style="height:45px;background-color: #fafafa;" type="flex" justify="center">
            <a-col span="12"></a-col>
            <a-col span="4" align="center" style="line-height:45px">
              小计：
            </a-col>
            <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
              ¥{{xp}}
            </a-col>
            <a-col class="tdx_w" span="4" align="center"  style="line-height:45px">
              ¥{{xm}}
            </a-col>
          
        </a-row>
        <a-row style="height:45px;background-color: #fafafa;" type="flex" justify="center" >
            <a-col span="12"></a-col>
            <a-col span="4" align="center" style="line-height:45px">
              合计：
            </a-col>
            <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
              ¥{{ps}}
            </a-col>
            <a-col class="tdx_w" span="4" align="center"  style="line-height:45px">
              ¥{{ms}}
            </a-col>
          
        </a-row>
    </a-row>
  </div>
  </a-spin>
</template>

<script>
import { getPayStoreList } from '@/api/cashier'
import { mapGetters } from 'vuex'
import EditableCell from '../cashier/EditableCell';
import {STable} from '@/components'
export default {
    name: 'charge_be_pay_payStore',
    components: {
        EditableCell,
        STable
    },
    data() {
        return {
            data: [],
            spinning:false,
            columns: [
                { title: 'ID', width: 100, dataIndex: 'id' },
              { title: '类型', width: 100, dataIndex: 'type' },
              { title: '小区', width: 100, dataIndex: 'bd_info_id_text' },
              { title: '房号/车位/车辆', width: 300, dataIndex: 'info',scopedSlots: { customRender: 'info' } },
              { title: '费用名称/时间', width: 200, dataIndex: 'name',scopedSlots: { customRender: 'name' } },
              { title: '状态/支付时间', width: 200, dataIndex: 'stc',scopedSlots: { customRender: 'stc' } },
              { title: '数量', width: 100, dataIndex: 'num' },
              { title: '应收金额', width: 100, dataIndex: 'price',scopedSlots: { customRender: 'price' } },
              { title: '优惠', width: 100, dataIndex: 'offer',scopedSlots: { customRender: 'offer' } },
              { title: '滞纳金', width: 100, dataIndex: 'overdue',scopedSlots: { customRender: 'overdue' } },
                { title: '折扣', width: 100, dataIndex: 'deduction' },
              { title: '实收金额', width: 100, dataIndex: 'money',scopedSlots: { customRender: 'money' } },
              { title: '缴费人', width: 150, dataIndex: 'user_id_name',align:'center',scopedSlots: { customRender: 'user_id_name' } },
              { title: '收款方式', width: 200, dataIndex: 'pay_style_text' },
              { title: '操作员', width: 150, dataIndex: 'action_user' },
              { title: '备注', width: 150, dataIndex: 'remark_list',scopedSlots: { customRender: 'remark_list' } },
              // { title: '状态',width: 150, dataIndex: 'status'},
            ],
            ps:0,
            ms:0,
            xp:0,
            xm:0,
            xd:0,
            deu:0,
            qu_s:[],
            searchVisible: false,
            show_se:false,
            bd_info:[],
            tollProjectList1:[],
            tollProjectList2:[],
            start_time_value:'',
            end_time_value:'',
            confirmLoading:false,
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
            type_list:[{name:'房屋',id:1},{name:'车位',id:2},{name:'车辆',id:3},{name:'临时停车费',id:7},{name:'其它收费',id:6}],
            messages:'',
            exportVisible2: false,
            tollProject:[],
            userAdmin:[],
            labels:[],
            bd_id:0,
            lab_id:0,
            jine_max_val:'',
            jine_min_val:'',
            jine_max_val_s:'',
            jine_min_val_s:'',
            gj_name_value:'',
            status:'',
            sou:'',
            pas:[],
            name:'',
            baseURL:this.axios.defaults.baseURL,
            queryParam: {},
            dataSource:parameter => {
                this.pas = parameter;
                return this.getList(Object.assign(parameter, this.queryParam))
                    .then(res => {
                        return res
                    })
            },
        }
    },
    computed: {
        rowSelection() {
            const { selectedRowKeys } = this
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
                },
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.name === 'Disabled User', // Column configuration not to be checked
                        name: record.name
                    }
                })
            }
        }
    },
    async mounted() {
        this.getBdList();
        this.getTollProject();
        this.getLabList();
        this.getUser();
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        exportOk1() {
            this.spinning=true;
            this.baseExcDate={pageNo:1,pageSize:100};
            this.exportVisible = false;
            let qu = [];
            if (this.gj_name_value) {
                qu['name'] = this.gj_name_value;
            } else {
                qu['name'] = this.house_name_value;
            }
            qu['type'] = this.type;
            qu['start_time'] = this.start_time_value;
            qu['end_time'] = this.end_time_value;
            qu['jine_max'] = this.jine_max_val;
            qu['jine_min'] = this.jine_min_val;
            qu['jine_max_s'] = this.jine_max_val_s;
            qu['jine_min_s'] = this.jine_min_val_s;
            qu['gj_name_value'] = this.gj_name_value;
            qu['status'] = this.status;
            qu['admin'] = this.admin;
            qu['sou'] = this.sou;
            qu['lab_id'] = this.lab_id;
            qu['bd_id'] = this.bd_id;
            this.escec(Object.assign(this.baseExcDate, qu))
        },
        export_se_cel(){
            this.show_se = false;
        },
        export_se () {
            let qu = '';
            if (this.gj_name_value) {
                qu = this.gj_name_value;
            } else {
                qu = this.house_name_value;
            }
            let dit = {name:qu,
                type:this.type,
                start_time:this.start_time_value,
                end_time:this.end_time_value,
                jine_max:this.jine_max_val,
                jine_min:this.jine_min_val,
                jine_max_s:this.jine_max_val_s,
                jine_min_s:this.jine_min_val_s,
                status:this.status,
                admin:this.admin,
                sou:this.sou,
                lab_id:this.lab_id,
                bd_id:this.bd_id};
            this.axios({
                method:'post',
                url:'/cashier/pay_store_exp_se',
                data:Object.assign(dit,{token:this.token()})
            }).then(res => {
                if(res.code==0){
                    this.show_se = true;
                    this.qu_s = res.msg;
                }else if(res.code==1000){
                    this.spinning=false;
                }else{
                    this.spinning=false;
                    this.$message.warning(res.msg,2)
                }
            }).catch(err => {
                this.spinning=false;
                this.$message.error('服务器发生错误...',2);
            }).finally(() => {
                this.loading = false;
            })
        },
        lab_click(v){
            this.lab_id = v;
        },
        getLabList(){
            this.axios({
                method:'get',
                url:'/community/get_lab_list',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    let ifo = {id:0,name:'全部'};
                    data.unshift(ifo);
                    this.labels = data
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        searchOk() {
            this.queryParam['name'] = '';
            this.name = '';
            this.searchVisible = false;
            this.queryParam['type'] = this.type;
            this.queryParam['start_time'] = this.start_time_value;
            this.queryParam['end_time'] = this.end_time_value;
            this.queryParam['jine_max'] = this.jine_max_val;
            this.queryParam['jine_min'] = this.jine_min_val;
            this.queryParam['jine_max_s'] = this.jine_max_val_s;
            this.queryParam['jine_min_s'] = this.jine_min_val_s;
            this.queryParam['gj_name_value'] = this.gj_name_value;
            this.queryParam['status'] = this.status;
            this.queryParam['admin'] = this.admin;
            this.queryParam['sou'] = this.sou;
            this.queryParam['bd_id'] = this.bd_id;
            this.queryParam['lab_id'] = this.lab_id;
            this.$refs.table.refresh(true);
        },
        searchCancel() {
            this.searchVisible = false
        },
        bdPro2(v){
            this.bd_pro_id2 = this.bd_info[v].id;
        },
        bd_see(v){
            this.type = this.type_list[v].id;
        },
        bd_click(v){
            this.bd_id = v;
        },
        getBdList(){
            this.axios({
                method:'get',
                url:'/community/get_bd_config_list',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    let ifo = {id:0,name:'所有小区'};
                    data.unshift(ifo);
                    this.bd_info=data
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        getUser(){
            this.axios({
                method:'get',
                url:'/community/get_bd_user',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    this.userAdmin = data
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        getTollProject() {
            this.axios({
                method:'post',
                url:'/houses/getTollProject_copy',
                data:{token:this.token()}
            }).then(res => {
                this.tollProjectList1=res.data.t1
                this.tollProjectList2=res.data.t2
                if(this.addType==1){
                    this.tollProject =  this.tollProjectList1
                }else{
                    this.tollProject =  this.tollProjectList2
                }
            }).catch(err => {
                this.$message.error('服务器发生错误...',2);
            })
        },
        start_time(date, dateString) {
            this.start_time_value = dateString;
        },
        end_time(date, dateString){
            this.end_time_value = dateString;
        },
        soufei_click(v){
            this.sf = v;
        },
        gj_name(v){
            this.gj_name_value = v.target.value;
        },
        jine_min(v){
            this.jine_min_val = v.target.value;
        },
        jine_max(v){
            this.jine_max_val = v.target.value;
        },
        jine_min_s(v){
            this.jine_min_val_s = v.target.value;
        },
        jine_max_s(v){
            this.jine_max_val_s = v.target.value;
        },
        type_click(v){
            this.type = v;
        },
        status_click(v){
            this.status = v;
        },
        admin_click(v){
            this.admin = v;
        },
        sou_click(v){
            this.sou = v;
        },
        getList(param) {
            return new Promise((resolve,reject) => {
                this.axios({
                    method:'get',
                    url: '/cashier/get_pay_store_list',
                    params:Object.assign(param,{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()})
                }).then(res => {
                    if(res.code === 0){
                        resolve(res.data);
                        this.ps = res.data['ps'];
                        this.ms = res.data['ms'];
                        this.deu = res.data['deu'];
                        this.xd = res.data['xd'];
                        this.xp = res.data['x_p'];
                        this.xm = res.data['x_m'];
                    }else{
                        this.$message.error(res.data.msg,2);
                    }
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                    this.loading = false;
                })
            })
        },
        searchModal() {
            this.searchVisible = true
        },
        onSearch(value) {
            // this.queryParam['gj_name_value'] = '';
            // this.gj_name_value = '';
            this.queryParam['gj_name_value'] = value;
            this.name = value;
            this.$refs.table.refresh(true);
        },
        exportModal2() {
            this.exportVisible2 = true
        },
        exportOk() {
            this.spinning=true;
            this.baseExcDate={pageNo:1,pageSize:10};
            this.exportVisible = false;
            let qu = [];
            qu['bd_info_id'] = this.bd_pro_id2;
            // qu['type'] = this.lei;
            qu['message'] = this.messages;

            qu['type'] = this.type;
            qu['start_time'] = this.start_time_value;
            qu['end_time'] = this.end_time_value;
            qu['jine_max'] = this.jine_max_val;
            qu['jine_min'] = this.jine_min_val;
            qu['jine_max_s'] = this.jine_max_val_s;
            qu['jine_min_s'] = this.jine_min_val_s;
            qu['gj_name_value'] = this.gj_name_value;
            qu['status'] = this.status;
            qu['admin'] = this.admin;
            qu['sou'] = this.sou;
            qu['bd_id'] = this.bd_id;
            qu['lab_id'] = this.lab_id;
            this.escec(Object.assign(this.baseExcDate, qu))
        },
        exportCancel2() {
            this.exportVisible2 = false
        },
        escec(param){
            this.loading = true;
            const _this=this;
            this.axios({
                method:'post',
                url:'/cashier/pay_store_exp',
                data:Object.assign(param,{token:this.token()})
            }).then(res => {
                if(res.code==0){
                    this.$message.success(`正在生成账单请不要刷新页面\n 当前${res.data.pageNo}/${res.data.totalPage}`,2);
                    // if(res.data.totalCount>res.data.pageNo){
                    _this.baseExcDate.pageNo=_this.baseExcDate.pageNo+1;
                    _this.escec(Object.assign(_this.baseExcDate, _this.queryParam))
                    // }
                }else if(res.code==1000){
                    this.spinning=false;
                    window.location.href=this.baseURL+res.url;
                }else{
                    this.spinning=false;
                    this.$message.warning(res.msg,2)
                }
            }).catch(err => {
                this.spinning=false;
                this.$message.error('服务器发生错误...',2);
            }).finally(() => {
                this.loading = false;
            })
        },
    }
}
</script>

<style scoped>
  .tdx{
    width: 100px;
  }
  .tdx_w{
    font-weight:600;
  }
</style>